import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {userStore} from '../../store'
const WatermarkView = ({}) => {

  const renderWatermark=()=> {
    const {userInfo}=userStore;
    let watermark=`${userInfo?.name} ${userInfo?.telNo}`;
    const itemWidth=160
    const itemHeight=100
    const rotateZ = -45
    if (typeof watermark != 'string' || (typeof watermark == 'string' && watermark.length < 1)) {
      return null;
    }
    const items = new Array()
    for (let index = 0; index < 50; index++) {
      const item = (
        <View
          key={'watermark_item' + index}
          style={[styles.watermarkItem, { width: itemWidth, height: itemHeight, transform: [{ rotateZ: rotateZ+'deg' }] }]}
        >
          <Text style={[{ color: 'rgba(0,0,0,0.2)', fontSize: 20 }]}>{watermark}</Text>
        </View>
      )
      items.push(item);
    }
    return (
      <View style={styles.watermarkContainer} pointerEvents={'none'}>
        {items}
      </View>
    )
  }

  return (
    <View style={[styles.container,{ overflow: 'hidden' }]} >
      {renderWatermark()}
    </View>
  );
};

export default WatermarkView;

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: '#F0F2F5'
  },

  watermarkContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0)',
    // position: 'absolute',
    // left: 0,
    // right: 0,
    // top: 0,
    // bottom: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    // alignItems: 'center',
    flexWrap: 'wrap',
    alignContent: 'flex-start'
  },
  watermarkItem: {
    backgroundColor: 'rgba(0,0,0,0)',
    justifyContent: 'center',
    alignItems: 'center',
  }
});
